<template>
  <div>
    <div class="bk-circle">
      <svg width="150px" height="150px" class="svg">
        <circle r="60" cy="75" cx="75" stroke-width="8" stroke="#ccc" fill="none" />
        <circle class="progress" r="60" cy="75" cx="75" stroke-width="8" stroke="#0099CC" :stroke-dashoffset="dashoffset" stroke-linecap="round" fill="none"  stroke-dasharray="376.8" />
        <!-- 圆的周长 c＝πd或c＝2πr  d=直径 c=周长 r=半径-->
      </svg>
      <div class="van-circle__text">{{num}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    styleList: {
      type: Number,
      default: 0,
    },
    total: {
      type: Number,
      required: true,
    },
  },
  data () {
    return {
      dasharray: "",
    };
  },
  computed: {
    num () {
      return (
        (this.dasharray = (this.styleList / this.total) * 100).toFixed(1) + "%"
      );
    },
    dashoffset () {
      return 375 - 375 * (this.styleList / this.total) + "px";
    },
  },
};
</script>

<style scoped>
.bk-circle {
  width: 100%;
  height: 100%;
  position: relative;
  display: inline-block;
  text-align: center;
}

.svg {
  transform: rotate(-90deg);
}

.van-circle__text {
  position: absolute;
  top: 50%;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 0 4px;
  color: #323233;
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
</style>